<template>
  <div class="share-sign-main pdlr15 base-main">
    <div class="placeholder-box"></div>
    <!--分享-->
    <div class="share-sign-box w100">
      <div class="title flex">
        <img src="../../assets/img/share_sign_active/img_share_sign_title.png" alt="">
        <div class="txt">
          <p class="color333 fs16">
            已连续分享
            <span>
                10天
            </span>
          </p>
          <p class="fs12 color666">连续分享7天、15天可得好礼（礼品二选一）</p>
        </div>
      </div>

      <div class="day-box">
        <ul class="w100 flex">
          <li
            v-for="(item, index) in signDaysArr"
            :key="index"
            :class="item.sign == true ? 'active' : ''"
            class="pr">
            <span class="pa text-c fs10">{{item.day}}</span>
          </li>
        </ul>
      </div>

      <div class="share-product">
        <p class="color333 fs14 text-c">分享以下任意商品完成今日任务</p>
        <ul class="flex">
          <li
            @click="shareProdut(item)"
            v-for="(item, index) in shareProductArr"
            :key="index">
            <img :src="item.url" alt="">
          </li>
        </ul>
      </div>
    </div>
    <!--分享-->

    <!--领取奖励-->
    <div class="prize-box">
      <p class="p-title">
        <span class="p-line-left"></span>
        领取奖励
        <span class="p-line-right"></span>
      </p>
      <p class="sub-title fs13 text-c">
        您已连续分享10天，可领7天奖励
      </p>

      <ul>
        <li class="flex">
          <img src="../../assets/img/share_sign_active/prize.png" alt="">
          <div class="prize-msg inline-block pr">
            <p class="fs14">
              连续分享
              <span>7天</span>
            </p>
            <p class="fs13">洗衣凝珠1袋</p>
            <span class="btn inline-block text-c fs12 pa active" @click="handleGetPrize">领取</span>
          </div>
        </li>
        <li class="flex">
          <img src="../../assets/img/share_sign_active/prize.png" alt="">
          <div class="prize-msg inline-block pr">
            <p class="fs14">
              连续分享
              <span>7天</span>
            </p>
            <p class="fs13">洗衣凝珠1袋</p>
            <span class="btn inline-block text-c fs12 pa">领取</span>
          </div>
        </li>
      </ul>
    </div>
    <!--领取奖励-->

    <!--活动规则-->
    <div class="rule-box">
      <p class="p-title">
        <span class="p-line-left"></span>
        活动规则
        <span class="p-line-right"></span>
      </p>

      <div class="txt fs14">
        <p v-for="(item, index) in ruleArr" :key="index">
          {{item}}
        </p>
      </div>
    </div>
    <!--活动规则-->
  </div>
</template>

<script type="text/ecmascript-6">
  import productImg from '../../assets/img/share_sign_active/img_product.png'

  export default {
    data() {
      return {
        signDaysArr:[
          {day: '1天', sign: false},
          {day: '2天', sign: false},
          {day: '3天', sign: false},
          {day: '4天', sign: true},
          {day: '5天', sign: true},
          {day: '6天', sign: true},
          {day: '7天', sign: true},
          {day: '8天', sign: true},
          {day: '9天', sign: true},
          {day: '10天', sign: true},
          {day: '11天', sign: true},
          {day: '12天', sign: true},
          {day: '13天', sign: true},
          {day: '14天', sign: true},
          {day: '15天', sign: false},
        ],
        shareProductArr: [
          {
            url: productImg,
            id: 1
          },
          {
            url: productImg,
            id: 2
          },
          {
            url: productImg,
            id: 3
          }
        ],
        ruleArr: [
          '1.每天参与商城分享好物链接到朋友圈/微信群（中途不能中断中断恢复重置）；',
          '2.连续7天分享任务可领取价值29.9元洗衣凝珠一袋；',
          '3.连续15天分享任务可领取价值129.9元洗衣凝珠一盒；',
          '4.活动福利不可叠加，详情可联系客服咨询；',
        ],
        signDays: 0,
      }
    },
    created() {
//      for (let i = 0, len = this.signDaysArr.length; i < len; i++) {
//        if(this.signDaysArr[i].sign)this.signDays++
//      }
      this.signDaysArr.map(item => {
        if(item.sign)this.signDays++
      })
      console.log(this.signDays);
    },
    methods: {
      shareProdut(item) {
        console.log(item);
      },
      handleGetPrize() {
        this.$dialog.confirm({
          title: '标题',
          message: '弹窗内容'
        }).then(() => {
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/shareSign";
</style>
